<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>百度地图显示当前位置</title>
    <!-- 引入百度地图API，需替换为自己的密钥 -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=dRRnGXH0vgq7DCC5rRjpxPbHWKA56Ijy"></script>
    <style>
        #mapContainer {
            width: 800px;
            height: 600px;
            margin: 20px auto;
            border: 1px solid #ccc;
        }
        .control-panel {
            text-align: center;
            margin: 20px;
        }
        button {
            padding: 8px 16px;
            font-size: 16px;
            cursor: pointer;
        }
        #info {
            text-align: center;
            margin: 10px;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="control-panel">
        <h3>显示当前位置在百度地图上</h3>
        <button id="showLocation">获取并显示当前位置</button>
    </div>
    <div id="info"></div>
    <div id="mapContainer"></div>

    <script>
        // 初始化地图
        let map = new BMap.Map("mapContainer");
        // 设置默认中心点和缩放级别
        let defaultPoint = new BMap.Point(116.404, 39.915);
        map.centerAndZoom(defaultPoint, 15);
        // 添加地图控件
        map.addControl(new BMap.NavigationControl());
        map.addControl(new BMap.ScaleControl());
        map.addControl(new BMap.OverviewMapControl());

        // 获取元素
        const showBtn = document.getElementById("showLocation");
        const infoDiv = document.getElementById("info");

        // 点击按钮获取并显示位置
        showBtn.addEventListener("click", function() {
            // 检查浏览器是否支持地理定位
            if (navigator.geolocation) {
                infoDiv.textContent = "正在获取您的位置...";
                navigator.geolocation.getCurrentPosition(
                    // 成功获取位置
                    function(position) {
                        const latitude = position.coords.latitude;
                        const longitude = position.coords.longitude;

                        // 由于百度地图使用的是百度坐标，需要进行坐标转换
                        const ggPoint = new BMap.Point(longitude, latitude);

                        // 将GPS坐标转换为百度坐标
                        BMap.Convertor.translate(ggPoint, 0, function(point) {
                            // 在地图上标注位置
                            map.centerAndZoom(point, 16);
                            const marker = new BMap.Marker(point);
                            map.addOverlay(marker);

                            // 添加信息窗口
                            const infoWindow = new BMap.InfoWindow(`您的位置：\n纬度：${latitude}\n经度：${longitude}`);
                            marker.openInfoWindow(infoWindow);

                            // 显示坐标信息
                            infoDiv.textContent = `已获取位置 - 纬度：${latitude.toFixed(6)}，经度：${longitude.toFixed(6)}`;
                        });
                    },
                    // 获取位置失败
                    function(error) {
                        let errorMsg = "";
                        switch(error.code) {
                            case error.PERMISSION_DENIED:
                                errorMsg = "用户拒绝了位置请求";
                                break;
                            case error.POSITION_UNAVAILABLE:
                                errorMsg = "位置信息不可用";
                                break;
                            case error.TIMEOUT:
                                errorMsg = "获取位置超时";
                                break;
                            default:
                                errorMsg = "发生未知错误";
                        }
                        infoDiv.textContent = "获取位置失败：" + errorMsg;
                    }
                );
            } else {
                infoDiv.textContent = "您的浏览器不支持地理定位功能";
            }
        });
    </script>
</body>
</html>
